<template>
  <layout class="evaluate">
    <uv-navbar
        :fixed="false"
        title="评价"
        left-arrow
        @leftClick="goBack"
    />
    <view v-for="(item, index) of productList" :key="item.unique" class="mb-20">
      <view class="evaluate-card">
        <view class="product-name">商品名：{{item.prodcutName}}</view>
        <div class="evaluate-item">
          <view class="evaluate-label">商品评价</view>
          <uv-rate
              active-color="#EE6D46"
              :count="5"
              v-model="item.productScore"
          ></uv-rate>
        </div>
        <uv-line color="#EE6D46"></uv-line>
        <view class="evaluate-content">
          <uv-textarea
              border="none"
              v-model="item.comment"
              placeholder="请填写您遇到的问题，这将帮助我们为您提供更好的服务"
          ></uv-textarea>
          <uv-upload
              :fileList="item.fileList"
              name="1"
              multiple
              :maxCount="10"
              @afterRead="(file) => afterRead(file, item)"
              @delete="(event) => handleDeletePic(event, item)"
          ></uv-upload>

        </view>
      </view>

      <view class="card evaluate-card noBorder">
        <view class="card-head">
          <view class="card-title">服务评价</view>
        </view>
        <view class="card-content">
          <view class="evaluate-item min">
            <view class="evaluate-label">服务评价</view>
            <uv-rate
                active-color="#EE6D46"
                :count="5"
                v-model="item.serviceScore"
            ></uv-rate>
          </view>
        </view>
      </view>
    </view>


    <view class="form-buttons submit-comment">
      <view class="submit-box">
        <uv-button
            round
            block
            type="primary"
            @tap="handleOrderComments"
        >
          提交评论
        </uv-button>
      </view>
    </view>
  </layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderComments } from '@/api/order'
import { VUE_APP_UPLOAD_URL } from '@/config'
import { useRouter } from "@/hooks/useRouter";

const {getParams, push} = useRouter()
const productScore = ref(0)
const serviceScore = ref(0)
const unique = ref(null)
const pics = ref([])
const currentfileList = ref([])
const currentIndex = ref(0)
const comment = ref("")
const orderInfoData = ref(null)
const productList = ref([])
const orderId = ref(0)

const {goBack} = useRouter()
const handleOrderComments = async () => {
  productList.value.forEach(product => {
    product.pics = product.imgs.toString();
  });
  const res = await orderComments(productList.value)
  if (res) {
    uni.showToast({
      title: "评价成功",
      icon: "none",
      duration: 2000
    });
    goBack()
  }
}

const handleDeletePic = (event, item) => {
  item.imgs.splice(event.index, 1)
  item.fileList.splice(event.index, 1)
}

const afterRead = async (event, item) => {
  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file)
  let fileListLen = item.fileList.length
  lists.map((fileItem) => {
    item.fileList.push({
      ...fileItem,
      status: 'uploading',
      message: '上传中'
    })
  })
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url)
    let itemData = item.fileList[fileListLen]
    item.fileList.splice(fileListLen, 1, Object.assign(itemData, {
      status: 'success',
      message: '',
      url: result
    }))
    let url = JSON.parse(result)
    item.imgs.push(url.data)
    fileListLen++
  }
}

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: VUE_APP_UPLOAD_URL,
      filePath: url,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data)
        }, 1000)
      }
    });
  })
}

const goOrderInfo = ()=>{
  push({url: '/pages/orderInfo/orderInfo'}, {
    data: {
      key: unique.value,
      orderId: orderId.value,
    }
  })
}


onLoad((options) => {
  const params = getParams(options)
  productList.value = params.unique.map(param => ({
    comment: '',
    pics: '',
    productScore: 5,
    serviceScore: 5,
    unique: param.unique,
    prodcutName: param.productInfo.storeName,
    imgs:[],
    fileList: []
  }));
  // unique.value = params.unique
  // orderId.value = params.orderId
})


</script>

<style lang="scss">
.submit-comment {
  position: fixed;
  left: 0;
  bottom: 20rpx;
  // #ifdef MP-WEIXIN
  bottom: 72rpx;
  // #endif
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  .submit-box {
    width: 100%;
  }
}
.evaluate {
  padding-bottom: 120rpx;
}
.evaluate-item {
  display: flex;
  align-items: center;
  padding: 30rpx 34rpx;

  &.min {
    .evaluate-label {
      font-size: 28rpx;
      color: #333333;
    }
  }

  .evaluate-label {
    margin-right: 24rpx;
    font-size: 32rpx;
    color: #333333;
  }
}

.evaluate-content {
  padding: 34rpx;

  .uv-textarea {
    padding: 0;
    border: 0;
  }
}

.evaluate-card {
  background: #fff;
  .product-name {
    padding: 30rpx 0 0 35rpx;
    font-size: 30rpx;
  }
}
</style>
